<!DOCTYPE html>
<html ng-app="he">
<head lang="en" >
    <meta charset="UTF-8">
    <title> HOME | TMS </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-sanitize.min.js"></script>
	<script type="text/javascript">
			is_local='{{local}}';
			function loadcss(cssfile) {
		        document.write('\<link rel="stylesheet" href="' + cssfile +'" type="text/css"/\>');
		    }
			function loadjs(script_filename) {
		        document.write('\<script language="javascript" type="text/javascript" src="' + script_filename + '"\>\</script\>');
		    }
		    if(!is_local){
			    static_url='/static';
		    }else{
			    static_url='../../../../static';
		    }
		</script>
<script type="text/javascript">
    var csslist=[
    			'/plugins/bootstrap/css/bootstrap.min.css',
    			'/plugins/font-awesome/css/font-awesome.min.css',
    			'/plugins/simple-line-icons/simple-line-icons.min.css',
    			'/plugins/uniform/css/uniform.default.css',
    			'/plugins/bootstrap-switch/css/bootstrap-switch.min.css',
    			'/plugins/bootstrap-datatimepicker/bootstrap-datetimepicker.min.css',
    			// 页面内容样式
    			'/plugins/select2/select2.css',
    			'/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css',
    			'/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css',
    			'/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css',
    			//主题风格
    			'/css/components.css',
    			'/css/plugins.css',
    			'/css/layout.css',
    			'/css/color.css',
    			'/css/filterStyle.css']
    for (x in csslist){
	    loadcss(static_url+csslist[x]);
    }
</script>

<script type="text/javascript">

    var app = angular.module('he',['ngSanitize']);
    app.controller('content',function ($scope,$http) {
	    $scope.static_url=static_url;
        // 设置body里面的变量
        if(is_local){
            $scope.records=[
                {approve_url:'100',gen_time:'2016-01-20 16:31',status:'pending',title:'heyulin apply for annual day'},
                {approve_url:'100',gen_time:'2016-01-21 13:31',status:'approved',title:'heyulin apply for annual day'},
                {approve_url:'100',gen_time:'2016-01-21 13:31',status:'rejected',title:'heyulin apply for annual day'}
            ]
        }else{

        }
        $scope.test_click=function () {
            //info('hello');
        }
    })
</script>

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" type="text/css"/>
    
</head>
<body class="page-header-fixed page-quick-sidebar-over-content page-sidebar-closed-hide-logo" ng-controller='content'>
<!-- 顶部横条开始 -->
<div class="page-header -i navbar navbar-fixed-top">
    <!-- 顶部内容开始 -->
    <div class="page-header-inner">
        <!-- logo -->
        <div class="page-logo">
            <a href="index.html">
                <span class="logo-default">TMS</span>
            </a>
            <!--快捷隐藏侧边栏-->
            <div class="menu-toggler sidebar-toggler"> </div>
        </div>
        <!-- logo 结束 -->
        <!-- 顶部搜索框开始 -->
        <form class="search-form" action="index.html" method="GET">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search{{static}}." name="query">
				<span class="input-group-btn">
				<a href="javascript:;" class="btn submit"><i class="icon-magnifier"></i></a>
				</span>
            </div>
        </form>
        <!-- 顶部搜索框结束 -->
        <!-- 响应式菜单切换开始 屏幕缩小时-->
        <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse"></a>
        <!-- 响应式菜单切换结束 -->
        <!-- 顶部导航菜单开始 -->
        <div class="top-menu">
            <ul class="nav navbar-nav pull-right">
                <!-- 通知下拉开始 -->
                <li class="dropdown dropdown-extended dropdown-notification" id="header_notification_bar">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <i class="icon-bell"></i>
					    <span class="badge badge-default"> 3 </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="external">
                            <h3><span class="bold">12 pending</span> notifications</h3>
                            <a href="index.html">view all</a>
                        </li>
                        <li>
                            <ul class="dropdown-menu-list scroller" style="height: 220px;" data-handle-color="#637283">
                                <li>
                                    <a href="javascript:;">
                                        <span class="time">just now</span>
									<span class="details">
									<span class="label label-sm label-icon label-success">
									</span>Leakage clock application. </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <span class="time">3 mins</span>
									<span class="details">
									<span class="label label-sm label-icon label-danger">
									</span>Leakage clock application. </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <span class="time">3 days</span>
									<span class="details">
									<span class="label label-sm label-icon label-danger">
									</span>Leakage clock application. </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!-- 通知下拉结束 -->
                <!-- 用户登录下拉开始 -->
                <li class="dropdown dropdown-user">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <small>Welcome ,</small>
					    <span class="username username-hide-on-mobile"> laiqin </span>
                    </a>
                </li>
                <li class="dropdown logOut">
                    <a href="javascript:;" class="dropdown-toggle">
                        <i class="icon-power"></i>
                        <span>log out</span>
                    </a>
                </li>
                <!-- 用户登录下拉结束 -->
            </ul>
        </div>
        <!-- 顶部导航菜单结束 -->
    </div>
    <!-- 顶部内容结束 -->
</div>
<!-- 顶部横条结束 -->
<!--清除浮动-->
<div class="clearfix">
</div>
<!-- 页面内容开始 -->
<div class="page-container">
    <!-- 侧边栏开始 -->
    <div class="page-sidebar-wrapper">
        <div class="page-sidebar navbar-collapse collapse">
            <!-- 侧边菜单开始 -->
            <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="margin-top:25px;">
                <li class="start active open">
                    <a href="javascript:;">
                        <i class="icon-speedometer"></i>
                        <span class="title">Dashboard</span>
                        <span class="selected"></span>
                        <span class="arrow open"></span>
                    </a>
                    <ul class="sub-menu">
                        <li class="active">
                            <a href="index.html">
                                <i class="icon-home"></i>
                                Home</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-grid"></i>
                        <span class="title">Attendance</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu">
                        <li onclick="loadpage('att_recording.html')">
                            <a href="#">Recording</a>
                        </li>
                        <li onclick="loadpage('miss_check.html')">
                            <a href="#">Miss check</a>
                        </li>
                        <li onclick="loadpage('att_report.html')">
                            <a href="#">Reports</a>
                        </li>
                        <li onclick="loadpage('set_work_time.html')">
                            <a href="#">Set work time</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-plane"></i>
                        <span class="title">Leave</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu">
                        <li onclick="loadpage('leave_application_record_hr.html')">
                            <a href="#">Application record</a>
                        </li>
                        <li>
                            <a href="#">Holiday Management</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-social-dropbox"></i>
                        <span class="title">Personnel records</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#">Employee Info</a>
                        </li>
                        <li>
                            <a href="#">New Entry</a>
                        </li>
                    </ul>
                </li>
                <li class="last">
                    <a href="javascript:;">
                        <i class="icon-settings"></i>
                        <span class="title">Last</span>
                        <span class="arrow "></span>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#">
                                <span class="badge badge-roundless badge-danger">new</span>111</a>
                        </li>
                        <li>
                            <a href="#">222</a>
                        </li>
                        <li>
                            <a href="#">333</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- 侧边菜单结束 -->
        </div>
    </div>
    <!-- 侧边栏结束 -->
    <!-- 内容开始 -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <!-- 面包屑导航开始-->
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-map-marker"></i>
                        <a href="#" id="pageHeader">Dashboard</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#" id="breadcrumbs">Home</a>
                    </li>
                </ul>
            </div>
            <!-- 面包屑导航结束 -->
            <!-- 页面内容开始 -->
            <div class="row">
                <div class="col-md-12" id="pageContent">
                    首页内容
                </div>
            </div>
            <!-- 页面内容结束 -->
        </div>
    </div>
    <!-- 内容结束 -->
</div>
<!-- 容器结束 -->
<!-- 脚部开始 -->
<div class="page-footer">
    <div class="page-footer-inner">
        Copyright &copy; 2016, Moki Tech Ltd.
    </div>
    <div class="scroll-to-top">
        <i class="icon-arrow-up"></i>
    </div>
</div>
<!-- 脚部结束 -->

<script type="text/javascript">	
    var jslist=[// 核心插件开始
    			'/plugins/jquery.min.js',
    			'/plugins/jquery-migrate.min.js',
    			'/plugins/jquery-ui/jquery-ui.min.js',
    			'/plugins/bootstrap/js/bootstrap.min.js',
    			'/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js',
    			'/plugins/jquery-slimscroll/jquery.slimscroll.min.js',
    			'/plugins/jquery.blockui.min.js',
    			'/plugins/jquery.cokie.min.js',
    			'/plugins/uniform/jquery.uniform.min.js',
    			'/plugins/bootstrap-switch/js/bootstrap-switch.min.js',
    			//页面内容插件开始
    			'/plugins/select2/select2.min.js',
    			'/plugins/datatables/media1/js/jquery.dataTables.min.js',
    			'/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js',
    			'/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.js',
    			'/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js',
    			'/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js',
    			'/plugins/bootstrap-datatimepicker/bootstrap-datetimepicker.js',
    			//侧边栏收缩功能
    			'/js/metronic.js',
    			'/js/layout.js',
    			//右边侧边栏
    			'/js/quick-sidebar.js',
    			//分页等
    			'/js/demo.js',
    			'/js/table-advanced.js',
    			]
    for (x in jslist){
	    loadjs(static_url+jslist[x]);
    }
</script>


<script>
    jQuery(document).ready(function() {
        Metronic.init();
        Layout.init();
        QuickSidebar.init();
        Demo.init();
    });
</script>



<script type="text/javascript">
    jQuery(document).ready(function() {
        $('#someid').on('click', function () {
            $('#OverviewcollapseButton').removeClass("collapse").addClass("expand");
            $('#PaymentOverview').hide();
        });
    });

    //load页面函数
    function loadpage(href){
        $("#pageContent").load(href,function(){
            TableAdvanced.init();
        });
    }

    $(function(){
         // 菜单栏选中样式时的判断，移除多余元素
        $(".sub-menu li").click(function(){
            var that = this;
            $(that).addClass("active").siblings().removeClass("active").parent().parent().siblings().children().find("li").removeClass("active");
            $(that).parent().parent().addClass("active open").siblings().removeClass("active open");
            if( $(that).parent().parent().children().find("span").hasClass("selected")){
                $(that).parent().parent().children().find("span").remove(".selected");
            }
            $(that).parent().siblings().append("<span class='selected'></span>");

            $(that).parent().parent().siblings().children().find("a").children().find("span").remove(".selected");

            //面包屑导航内容变更
            var text1=$(that).parent().siblings().find(".title").text();
            var text2=$(that).children().text();
            $("#pageHeader").text(text1);
            $("#breadcrumbs").text(text2);
        });
    });

</script>

</body>
</html>